<template>
    <div class="header">
		<router-link class="left" to="/home">
			<i class="iconfont icon-zhuye home"></i>
		</router-link>
        <div class="logo">网易严选</div>
        <div class="right">
			<router-link to="/search">
				<i class="iconfont icon-sousuo search"></i>
			</router-link>
			<router-link to="/shopCart">
				<i class="iconfont icon-gouwuche2 shopCart"></i>
			</router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Header',
}
</script>

<style lang="less" scoped>
    .header{
        width: 100%;
        height: 42.5px;
        background-color: #FAFAFA;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        box-sizing: border-box;
        .left{
            margin-right: 45px;
            .home{
                font-size: 28px;
            }
        }
        .logo{
            font-size: 20px;
            font-weight: bold;
            font-family: 'Times New Roman', Times, serif;
            align-self: center;
        }
        .right{
            display: flex;
            align-items: center;
			color: #2F4333;
            .search{
                margin-right: 20px;
				font-size: 28px;
            }
			.shopCart{
				font-size: 28px;
			}
        }
    }
</style>

